<template>
    <div class="split-box">
        <v-dialog
            title="物业合并"
            :show.sync="dialogVisible"
            :closeOnClickModal=false
            @beforeClose="beforeClose"
            width="1200px">
            <div style="padding: 5px">
                <el-steps :active="active" align-center>
                    <el-step title="物业信息确认"></el-step>
                    <el-step title="执行物业合并"></el-step>
                </el-steps>
                <div  class="resource-manage">
                    <div class="card-box">
                        <el-form  v-show="active===0" class="form-wrap2 full" size="small">
                            <el-table :data="sourceRoom"
                                align="center">
                                <el-table-column label="序号" width="60" type="index">
                                </el-table-column>
                                <el-table-column label="物业名称" prop="propertyName"></el-table-column>
                                <el-table-column label="建筑面积（产权）(m²)" width="200" prop="buildingArea">
                                </el-table-column>
                                <el-table-column label="套内面积(m²)" prop="unitConstructionArea">
                                </el-table-column>
                                <el-table-column label="备注" prop="remarks">
                                </el-table-column>
                            </el-table>
                        </el-form>


                        <el-form label-position="top" v-show="active===1" ref="mergeRoom" :model="mergeRoom" class="form-wrap" size="small" :rules="mergeRoom_rules">
                            <el-form-item label="物业名称" prop="roomName" :rules="mergeRoom_rules.propertyName">
                                {{baseRoomName}}-<el-input  style="width: 200px;white-space:nowrap;" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" v-model="mergeRoom.roomName"  maxlength="5" placeholder="请输入" ></el-input>
                            </el-form-item>
                          <!--  <el-form-item label="编码" prop="roomCode">
                                <el-input v-model="mergeRoom.roomCode"  maxlength="30" placeholder="请输入编码"></el-input>
                            </el-form-item>-->
                            <el-form-item label="单元" prop="roomUnit">
                                <el-input :readonly="true" v-model="mergeRoom.roomUnit" placeholder="请输入单元"></el-input>
                            </el-form-item>
                            <el-form-item label="楼层" prop="floor">
                                <el-input :readonly="true" v-model="mergeRoom.floor" placeholder="请输入楼层"></el-input>
                            </el-form-item>
                            <el-form-item label="建筑面积(m²)" prop="buildArea">
                                <el-input :readonly="true" v-model="mergeRoom.buildArea" placeholder="请输入建筑面积"></el-input>
                            </el-form-item>
                            <el-form-item label="套内面积(m²)" prop="unitConstructionArea">
                                <el-input :readonly="true" v-model="mergeRoom.unitConstructionArea" placeholder="请输入套内面积"></el-input>
                            </el-form-item>
														<el-form-item label="物业类型" prop="projectType">
															<el-select v-model="mergeRoom.projectType" @change="changeProjectType" placeholder="请选择物业类型">
																<el-option
																	v-for="item in propertyTypes"
																	:key="item.value"
																	:label="item.label"
																	:value="item.value">
																</el-option>
															</el-select>
														</el-form-item>
														<el-form-item label="物业用途" prop="projectSubclassType">
															<el-select v-model="mergeRoom.projectSubclassType" placeholder="请选择物业用途">
																<el-option
																	v-for="item in useTypesFilter"
																	:key="item.value"
																	:label="item.label"
																	:value="item.value">
																</el-option>
															</el-select>
														</el-form-item>
                            <el-form-item label="备注" prop="remarks" class="full">
                                <el-input v-model="mergeRoom.remarks" maxlength="50" placeholder="请输入备注">
                                </el-input>
                            </el-form-item>
                        </el-form>


                    </div>
                </div>

                <el-button class="btn-pro" style="margin-top: 12px;" v-show="active===1" @click="commit">完成</el-button>
                <el-button class="btn-pro" style="margin-top: 12px;"  @click="cancel">取消</el-button>
                <el-button class="btn-pro" style="margin-top: 12px;" v-show="active===0" @click="next">下一步</el-button>
                <el-button class="btn-pro" style="margin-top: 12px;" v-show="active===1" @click="back">上一步</el-button>
            </div>
        </v-dialog>
    </div>
</template>

<script>
    import {validateRoomCode} from '../api/room.js'
    import {validateFacRoomName} from "~/views/property-info-sys/project-manage/api/project_manage";
		import {getDict} from '~/utils'
    export default {
        name: "merge-room",
        data() {
            let validateRoomCode = (rule, value, callback) => {
                if(!value){
                    callback()
                }
                this.validateOnly(value, callback)
            };
            return{
                dialogVisible: false,
                active: 0,
                sourceRoom:[],
                baseRoomName:'',
								propertyTypes: [],
								useTypes: [],
								useTypesFilter: [],
                mergeRoom: {
                    roomName:'',
                    roomCode: '',
                    roomUnit: '',
                    floor: '',
                    buildArea: '',
                    unitConstructionArea: '',
                    remarks: '',
										projectSubclassType:'',
										projectType:'',
                    oldRoomIds: []
                },
                mergeRoom_rules:{
                    roomName: [
                        { required: true, message: '请输入物业名称', trigger: 'blur' },
                        { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" },
                    ],
                    roomCode: [
                        { required: true, message: '请输入编码', trigger: 'blur' },
                        { min: 0, max: 30, message: "长度在0-30个字符串", trigger: "blur" },
                        { validator: validateRoomCode, trigger: "change" },
                    ],
										projectType: [
											{required: true, message: '请选择物业类型', trigger: 'blur'}
										],
										projectSubclassType: [
											{required: true, message: '请选择物业用途', trigger: 'blur'}
										],
                    remarks: [
                        { min: 0, max: 100, message: "长度在0-100个字符串", trigger: "blur" },
                    ]
                }
            }
        },
			mounted() {
				this.propertyTypes = getDict('property_types') //物业类型
				this.useTypes = getDict('property_use_types') //物业用途
			},
			watch: {
            sourceRoom: function (newVal , oldVal) {
                if(newVal != null){
                    this.mergeRoom.oldRoomIds = newVal.map(rep => {
                        return rep.roomId
                    })
                   this.mergeRoom.roomUnit =  newVal[0].roomUnit
                   this.mergeRoom.floor =  newVal[0].floor
                   this.mergeRoom.buildArea = newVal.reduce((ac, curr) => parseFloat(ac) + parseFloat(curr.buildingArea), 0)
                   this.mergeRoom.unitConstructionArea = newVal.reduce((ac, curr) => parseFloat(ac) + parseFloat(curr.unitConstructionArea), 0)

                }
            }
        },
        methods: {
					//jiaj 根据物业类型，获取对应的物业用途
					changeProjectType(val){
						this.$set(this.mergeRoom, 'projectSubclassType', '')
						//重置物业用途
						this.useTypesFilter = []
						if(val){
							//过滤物业用途
							this.useTypesFilter = this.useTypes.filter(ut => ut.value.indexOf(val) == 0)
						}
					},
             async commit(){
							 await validateFacRoomName({"roomName": this.baseRoomName+"-"+this.mergeRoom.roomName}).then(res => {
								 if (res.data.data !== 0) {
									 this.$message.error("物业名称已存在，请重新输入！")
									 this.mergeRoom.roomName = ''
								 }
							 })
                this.$refs['mergeRoom'].validate((valid) => {
                    if(valid){
                        this.$emit("doMerge", this.mergeRoom)
                        this.cancel();
                    }
                })
            },
            validateOnly(value, callback){
                validateRoomCode({"roomCode": value}).then(rep => {
                    let vr = rep.data.data
                    if (vr === 0) {
                        return callback();
                    } else {
                        return callback(new Error("编号已存在， 请重新输入"));
                    }
                })
            },
            beforeClose(done) {
                this.cancel()
                done()
            },
            next() {
                if (this.active++ > 1) this.active = 0;
            },
            back(){
                if (this.active-- < 0) this.active = 0;
            },
            cancel(){
                this.dialogVisible = false
							this.$emit("mergeRoomClose")
            },
            //验证物业名称唯一
            propertyNameOnly(value) {
                validateFacRoomName({"roomName": this.baseRoomName+"-"+value}).then(res => {
                    if (res.data.data !== 0) {
                        this.$message.error("物业名称已存在，请重新输入！")
                        this.mergeRoom.roomName = ''
                    }
                })
            }
        }
    }
</script>

<style lang='scss' scoped>

    @include formWrap(2);
    .split-box {
        overflow: hidden;
        .btn-pro {
            float: right;
            margin: 10px;
        }
    }
</style>
